<%-- 
    Document   : project
    Created on : Aug 11, 2014, 6:22:00 AM
    Author     : THAONV
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

    <body>
        <section id="recent-works">
            <div class="container">
                <div class="center">
                    <h3>Our Recent Works</h3>
                    <p class="lead">Look at some of the recent projects we have completed for our valuble clients</p>
                </div>  
                <div class="gap"></div>
                <ul class="gallery col-4">
                    <!--Item 1-->
                    <li>
                        <div class="preview">
                            <img alt=" " src="images/portfolio/thumb/item1.jpg">
                            <div class="overlay">
                            </div>
                            <div class="links">
                                <a data-toggle="modal" href="#modal-1"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>                          
                            </div>
                        </div>
                        <div class="desc">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                        <div id="modal-1" class="modal hide fade">
                            <a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
                            <div class="modal-body">
                                <img src="images/portfolio/full/item1.jpg" alt=" " width="100%" style="max-height:400px">
                            </div>
                        </div>                 
                    </li>
                    <!--/Item 1--> 

                    <!--Item 2-->
                    <li>
                        <div class="preview">
                            <img alt=" " src="images/portfolio/thumb/item2.jpg">
                            <div class="overlay">
                            </div>
                            <div class="links">
                                <a data-toggle="modal" href="#modal-1"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>                                
                            </div>
                        </div>
                        <div class="desc">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                        <div id="modal-1" class="modal hide fade">
                            <a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
                            <div class="modal-body">
                                <img src="images/portfolio/full/item2.jpg" alt=" " width="100%" style="max-height:400px">
                            </div>
                        </div>                 
                    </li>
                    <!--/Item 2-->

                    <!--Item 3-->
                    <li>
                        <div class="preview">
                            <img alt=" " src="images/portfolio/thumb/item3.jpg">
                            <div class="overlay">
                            </div>
                            <div class="links">
                                <a data-toggle="modal" href="#modal-3"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>                                
                            </div>
                        </div>
                        <div class="desc">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                        <div id="modal-3" class="modal hide fade">
                            <a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
                            <div class="modal-body">
                                <img src="images/portfolio/full/item3.jpg" alt=" " width="100%" style="max-height:400px">
                            </div>
                        </div>                 
                    </li>
                    <!--/Item 3--> 

                    <!--Item 4-->
                    <li>
                        <div class="preview">
                            <img alt=" " src="images/portfolio/thumb/item4.jpg">
                            <div class="overlay">
                            </div>
                            <div class="links">
                                <a data-toggle="modal" href="#modal-4"><i class="icon-eye-open"></i></a><a href="#"><i class="icon-link"></i></a>                                
                            </div>
                        </div>
                        <div class="desc">
                            <h5>Lorem ipsum dolor sit amet</h5>
                        </div>
                        <div id="modal-4" class="modal hide fade">
                            <a class="close-modal" href="javascript:;" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></a>
                            <div class="modal-body">
                                <img src="images/portfolio/full/item4.jpg" alt=" " width="100%" style="max-height:400px">
                            </div>
                        </div>                 
                    </li>
                    <!--/Item 4-->               

                </ul>
            </div>

        </section>
    </body>
</html>
